<template>
  <DefaultLayout>
    <div class="space-y-8">
      <h1 class="text-4xl font-bold">资源下载</h1>
      
      <!-- 资源分类 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div v-for="category in categories" :key="category.id" class="card">
          <div class="text-4xl mb-4">{{ category.icon }}</div>
          <h2 class="text-2xl font-semibold mb-4">{{ category.name }}</h2>
          <p class="text-gray-600 mb-6">{{ category.description }}</p>
          <div class="space-y-4">
            <div
              v-for="resource in category.resources"
              :key="resource.id"
              class="flex items-center justify-between p-4 bg-gray-50 rounded-lg"
            >
              <div>
                <h3 class="font-semibold">{{ resource.name }}</h3>
                <p class="text-sm text-gray-500">{{ resource.size }}</p>
              </div>
              <a
                :href="resource.url"
                class="btn btn-primary"
                download
              >
                下载
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </DefaultLayout>
</template>

<script setup lang="ts">
import DefaultLayout from '../layouts/DefaultLayout.vue'

const categories = [
  {
    id: 1,
    name: '插件',
    icon: '🔌',
    description: '精选的 Cursor 插件，提升开发效率',
    resources: [
      {
        id: 1,
        name: '主题包',
        size: '2.5MB',
        url: '#'
      },
      {
        id: 2,
        name: '代码片段',
        size: '1.2MB',
        url: '#'
      }
    ]
  },
  {
    id: 2,
    name: '模板',
    icon: '📋',
    description: '项目模板和代码示例',
    resources: [
      {
        id: 1,
        name: 'Vue3 项目模板',
        size: '5.8MB',
        url: '#'
      },
      {
        id: 2,
        name: 'React 项目模板',
        size: '4.2MB',
        url: '#'
      }
    ]
  },
  {
    id: 3,
    name: '文档',
    icon: '📚',
    description: '详细的文档和教程',
    resources: [
      {
        id: 1,
        name: '使用手册',
        size: '3.1MB',
        url: '#'
      },
      {
        id: 2,
        name: 'API 文档',
        size: '2.8MB',
        url: '#'
      }
    ]
  }
]
</script> 